<template>
  <div>
    <el-table
      :data="deviceData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="id"
        label="设备ID"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="auth_info"
        label="设备名称"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="protocol"
        label="所属产品"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="desc"
        label="设备描述"
        width="350"
      >
      </el-table-column>
      <el-table-column
        prop="online"
        label="设备状态"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.online===true">在线</el-tag>
          <el-tag type="danger" v-if="scope.row.online===false">离线</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="130"
      >
        <template slot-scope="scope">
          <router-link :to="'device/'+scope.row.id">
            <el-button @click="handleDetails(scope)" type="text" size="small">查看</el-button>
          </router-link> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-dropdown>
            <span class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>在线记录</el-dropdown-item>
              <el-button type="text" @click="dialogFormVisible = true">
                <el-dropdown-item>下发命令</el-dropdown-item>
              </el-button>
              <el-dropdown-item @click.native="deleteDevice(scope)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="1"
      style="float:right"
    >
    </el-pagination>

    <!-- 点击下发命令后弹框 -->
    <el-dialog title="下发命令" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="命令内容：" style="margin-left:50px">
          <el-radio-group v-model="form.fristRadiio">
            <el-radio label="string_1">字符串</el-radio>
            <el-radio label="base64_1">16进制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="desc" style="margin-left:130px;width: 80%;">
          <el-input type="textarea" v-model="form.requestContent"></el-input>
        </el-form-item>
        <el-form-item label="超时时间：" :label-width="formLabelWidth" style="margin-left:10px">
          <el-input v-model="form.timeout" autocomplete="off"></el-input>
        </el-form-item>
        <el-button type="primary" :loading=this.loading style="margin-left:620px;" @click="sendDirective">发送</el-button>
        <el-divider></el-divider>
        <el-form-item label="返回结果：" style="margin-left:50px">
          <el-radio-group v-model="form.secondRadio">
            <el-radio label="base64_2">Base64</el-radio>
            <el-radio label="string_2">String</el-radio>
            <el-radio label="hex">Hex</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="desc" style="margin-left:130px;width: 80%;">
          <el-input type="textarea" v-model="form.responseResult"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {

      loading: false,
      deviceId: '', // 点击某个按钮后单个设备的Id
      dialogFormVisible: false,
      form: {
        fristRadio: '', // 第一个单选框选中的内容
        requestContent: '', //  请求框中的内容
        timeout: '',
        secondRadio: '', // 第二个单选框选中的内容
        responseResult: '' // 发送指令后响应体内容
      },
      formLabelWidth: '120px',

      deviceData: null,
      list: null,
      listLoading: true
    }
  },
  created() {
    this.getDeviceList()
  },
  methods: {
    getDeviceList() {
      // get请求
      axios({
        method: 'get',
        url: 'http://localhost:8080/device/list'

      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        this.deviceData = res.data.data.devices
        console.log(this.deviceData)
      }).catch(() => { // 这里是请求失败执行的内容
      }).then((res) => {
        this.deviceData = res.data.data.devices
        console.log(this.deviceData)
      }).catch(() => {

      })
    },
    // 点击删除按钮删除设备
    deleteDevice(scope) {
      console.log(scope)
      // 发送ajax请求删除设备
      axios({ // get请求
        method: 'get',
        url: 'http://localhost:8080/device/' + scope.row.id
      }).then((res) => { // 这里是请求成功后执行的内容，res为返回的数据
        console.log(this.res)
        // 重新加载页面
        location.reload()
      }).catch(() => { // 这里是请求失败执行的内容

      })
    },

    // 打开下发指令弹框
    openDirective(deviceId) {
      console.log(deviceId)
      this.form.responseResult = ''
      this.form.requestContent = ''
      this.form.timeout = ''
      this.loading = false
      // 点击下发命令后获取某个设备Id
      this.deviceId = deviceId
    },
    // 点击下发命令的发送按钮
    sendDirective() {
      this.loading = true
      axios({ // get请求
        method: 'get',
        url: 'http://localhost:8080/device/sendDirective/' + this.deviceId + '/' + this.form.requestContent + '/' + this.form.timeout
      }).then((res) => {
        this.loading = false
        console.log(res.data.errno)
        if (res.data.errno === 0) {
          this.form.responseResult = res.data
        } else {
          this.form.responseResult = res.data.error
        }
        // location. reload()
      }).catch((res) => {
        console.log('---------------1')
        console.log(res)
      })
    },

    handleDetails(scope) {
      console.log(scope)
    }
  }
}
</script>
<style>
.el-dropdown-link {
  font-size: 12px;
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
